<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Draw Features</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

  <style>
    #vienna {
      text-decoration: none;
      color: white;
      font-size: 11pt;
      font-weight: bold;
      text-shadow: black 0.1em 0.1em 0.2em;
    }
  </style>
</head>
<body>
<div id="map" class="map"></div>
<form class="form-inline">
  <select id="type">
    <option selected value="Circle">Circle</option>
  </select>
</form>
<div id="vienna"
     style="display: none; margin: 0px; padding: 0px; width: 31px; height: 19px; overflow: hidden;">
  // 自行替换图标
  <img id="controller"
       src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553581291180&di=818b400bedfab6456bb015c6ae5188af&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F18%2F53%2F590500e4b4c71_610.jpg"
       style="left: 0px; top: 0px; width: 50px; height: 50px;">
  <label unselectable="on" id="nbHandleLabel"
         style="position: absolute; display: inline;
           cursor: inherit; border: none; padding: 0px;
           white-space: nowrap; font-style: normal;
           font-variant: normal; font-weight: normal;
           font-stretch: normal; font-size: 12px;
           line-height: 20px;
           font-family: arial, simsun;
            z-index: 20020; height: 20px;
             color: black; text-indent: 5px;
              text-align: center; zoom: 1;
               width: 56px; -webkit-user-select: none;
               left: 30px; top: 0px;
               // 自行替换图标
               background: url() -31px 0px;">1148m</label>
</div>

<div id="marker" title="Marker"></div>
<script>

  var sphare = new ol.Sphere(6378137);
  var is_mouse_down = false;
  var is_mouse_move = false;
  var circle = null;

  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  });

  var source = new ol.source.Vector({wrapX: false});

  var vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new ol.style.Stroke({
        color: '#002cff',
        width: 2
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ff5b1e'
        })
      })
    })
  });

  var map = new ol.Map({
    layers: [gaodeMapLayer, vector],
    target: 'map',
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [120, 30],
      zoom: 12
    })
  });

  var orignalRadius = null;

  var typeSelect = document.getElementById('type');

  var draw;

  function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
      var geometryFunction, maxPoints;

      draw = new ol.interaction.Draw({
        source: source,
        type: (value),
        geometryFunction: geometryFunction,
        maxPoints: maxPoints
      });
      draw.on("drawend", function (event) {
        document.getElementById('vienna').style.setProperty("display", "block");
        vector.getSource().clear();
        circle = event.feature.getGeometry();
        console.log(circle.getCenter(), circle.getRadius());
        orignalRadius = circle.getRadius();
        var markerPos = event.feature.getGeometry().getLastCoordinate();
        var marker = new ol.Overlay({
          position: markerPos,
          positioning: 'center-center',
          element: document.getElementById('vienna'),
          offset: [0, 0]
        });

        map.addOverlay(marker);
        var length = sphare.haversineDistance(circle.getCenter(), circle.getLastCoordinate());
        $("#nbHandleLabel").html(length + "m");
        map.removeInteraction(draw);

        $(document).on('mouseup', function (event) {
          is_mouse_down = false;
          $(document).off("mousemove");
          $("#vienna").off('mousemove');
        });

        $("#vienna").on("mouseup", function (event) {
          is_mouse_down = false;
          $("#vienna").off('mousemove');
        });

        $("#vienna").on("mousedown", function (event) {
          is_mouse_down = true;
          event.preventDefault();
          map.on('pointermove', function (mapmoveevt) {
            if (is_mouse_down) {
              if (mapmoveevt.preventDefault) {
                mapmoveevt.preventDefault();
              } else {
                mapmoveevt.returnValue = false;
              }
              var radius = Math.sqrt(getRadiusSquared_(mapmoveevt));
              circle.setRadius(radius);
              var length = sphare.haversineDistance(circle.getCenter(), circle.getLastCoordinate());
              $("#nbHandleLabel").html(length + "m");
              marker.setPosition(circle.getLastCoordinate());
            }
          });
        });
      });
      map.addInteraction(draw);

      getRadiusSquared_ = function (mapmoveevt) {
        var center = circle.getCenter();
        var lastcoordinat = mapmoveevt.coordinate;
        return Math.pow(lastcoordinat[0] - center[0], 2) + Math.pow(lastcoordinat[1] - center[1],
            2);
      };
    }
  }

  typeSelect.onchange = function () {
    map.removeInteraction(draw);
    addInteraction();
  };

  addInteraction();
</script>
</body>
</html>
